<!--风险分析-->
<template>
    <div class="riskAnalysisView">
        <div class="equipment_statistics_echarts">
            <chart-view :chart-option="state.equipmentStatistics" :auto-resize="true" height="150px"></chart-view>
            <div class="chartInfo">
                <h3>100个</h3>
                <p>风险总量</p>
            </div>
        </div>
        <div class="statistics">
            <div v-for="(item, index) in state.statisticsList" :key="index">
                <div class="fl">
                    <span :style="{ background: item.back }"></span>
                    <span>{{ item.name }}</span>
                </div>
                <div class="fr" :style="{ color: item.back }">{{ item.num }}个</div>
            </div>
        </div>
    </div>
    <div class="riskAnalysisNumber">
        <CustomGreenInitiativeCommonTotalNumber
            class="riskAnalysisNumber_bgImg"
            :total-list="{ name: '风险管控层级', numList: 1000, unit: '个' }"
        ></CustomGreenInitiativeCommonTotalNumber>
        <div class="riskAnalysis_echarts">
            <chart-view
                :chart-option="
                    EchartsMethods.WastewaterDischarge({
                        unit: '个',
                        xVal: [
                            {
                                name: '厂级',
                                value: 175.17
                            },
                            {
                                name: '车间级',
                                value: 148.35
                            },
                            {
                                name: '班组级',
                                value: 95.36
                            },
                            {
                                name: '岗位级',
                                value: 56
                            }
                        ]
                    })
                "
                :auto-resize="true"
                style="height: 100%"
                height="100%"
            ></chart-view>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, nextTick } from 'vue';
import { EchartsMethods } from '@/chart/index';

const datas = {
    alpha: 35,
    distance: 170,
    top: '0%',
    pieData: 70,
    autoRotate: false,
    internalDiameterRatio: 0.73,
    item: [
        {
            name: '一级危险源',
            value: 37,
            itemStyle: {
                color: '#FF3238'
            }
        },
        {
            name: '二级危险源',
            value: 44,
            itemStyle: {
                color: '#FF8D10'
            }
        },
        {
            name: '三级危险源',
            value: 32,
            itemStyle: {
                color: '#FFD517'
            }
        },
        {
            name: '四级危险源',
            value: 16,
            itemStyle: {
                color: '#0E96FF'
            }
        }
    ]
};
const state = reactive({
    statisticsList: [
        {
            back: '#FF3238',
            name: '一级危险源',
            num: '202',
            rate: '64%'
        },
        {
            back: '#FF8D10',
            name: '二级危险源',
            num: '100',
            rate: '16%'
        },
        {
            back: '#FFD517',
            name: '三级危险源',
            num: '42',
            rate: '12%'
        },
        {
            back: '#0E96FF',
            name: '四级危险源',
            num: '20',
            rate: '8%'
        }
    ],
    equipmentStatistics: {}
});
onMounted(() => {
    nextTick(() => {
        state.equipmentStatistics = EchartsMethods.equipmentStatistics(datas);
    });
});
</script>

<style scoped lang="scss">
.riskAnalysisView {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 34%;
    .equipment_statistics_echarts {
        width: 54%;
        position: relative;
        .chartInfo {
            position: absolute;
            width: 100%;
            top: 28px;
            text-align: center;
            color: #fff;
            h3 {
                font-weight: 100;
                font-size: 22px;
                letter-spacing: 2px;
                @include pmzd();
            }
            p {
                font-size: 12px;
            }
        }
    }
    .statistics {
        width: calc(54% - 30px);
        margin-left: 30px;
        > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            &:last-of-type {
                margin-bottom: 0;
            }
        }
        .fl {
            width: 55%;
            display: flex;
            align-items: center;
            span:first-of-type {
                width: 10px;
                height: 10px;
                display: inline-block;
                margin-right: 5px;
            }
            span:last-of-type {
                @include fontCustomStyle(#ffffff, 12px);
            }
        }
        .fr {
            font-size: 12px;
            @include pmzd();
            font-weight: 400;
            letter-spacing: 1px;
        }
    }
}
.riskAnalysisNumber {
    height: calc(100% - 34% - 10px);
    .riskAnalysisNumber_bgImg {
        margin-top: 12px;
        margin-bottom: 8px;
    }
    .riskAnalysis_echarts {
        height: calc(100% - 56px);
    }
}
</style>
